<template>
  <div>
    <pageHeader :title="title" :bread-crumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-button type="primary" @click="save">保存</a-button>
        <a-button @click="cancel">取消</a-button>
      </template>
    </pageHeader>
    <CodeSettingNew ref="codeSettingRef" :form="form"></CodeSettingNew>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, defineAsyncComponent, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import pageHeader from '@/components/page-header/index.vue';
  import { cloneDeep } from 'lodash';
  import {
    postEquipmentNum,
    getEquipmentNum
  } from '@/api/equipment-management/base-setting/index';
  import { postPurchaseNumSet } from '@/api/buy-management/base-setting/procurement-template/index';
  import { AnySrvRecord } from 'dns';

  // let CodeSettingNew = defineAsyncComponent(
  //   () => import('@/components/code-setting-new/index.vue')
  // );

  const router = useRouter();
  const route = useRoute();
  const categoryId = ref(Number(route.query.key));
  const title = ref();
  const breadCrumb = ref(['生产管理', '基础设置', `${title.value}`]);

  let codeSettingRef = ref(); // 储存编号设置ref
  let form = ref<any>({
    preStruct: {
      description: 'ww',
      length: 1,
      name: 'cjs',
      isEnabled: 1
    },
    time: {
      isEnabled: 2,
      way: '',
      content: undefined
    },
    length: 1,
    delimiter: '',
    code: ''
  });
  const getData = (res: any) => {
    if (res.timeStamp.length) {
      let time = {
        way: 0,
        isEnabled: 1,
        content: res.timeStamp
      };
      if (res.timeStamp.length === 4) {
        time.way = 1;
      } else if (res.timeStamp.length === 6) {
        time.way = 2;
      } else if (res.timeStamp.length === 8) {
        time.way = 3;
      }
      res.time = time;
      delete res.timeStamp;
    } else {
      res.time = {
        way: 0,
        isEnabled: 2,
        content: res.timeStamp
      };
      delete res.timeStamp;
    }
    res.preStruct = JSON.parse(res.preStruct);
    codeSettingRef.value.currForm = res;
  };

  const getEquipmentNumData = async () => {
    const res = await getEquipmentNum({ category: categoryId.value });
    if (res.id !== 0) {
      getData(res);
    }
  };
  getEquipmentNumData();

  // 保存按钮
  const save = async () => {
    let newCurrForm = cloneDeep(codeSettingRef.value.currForm);
    if (codeSettingRef.value.currForm.time.isEnabled === 1) {
      newCurrForm.timeStamp = codeSettingRef.value.currForm.time.content;
      delete newCurrForm.time;
    } else {
      delete newCurrForm.time;
    }
    newCurrForm.preStruct = JSON.stringify(newCurrForm.preStruct);
    newCurrForm.categoryId = categoryId.value;
    await postPurchaseNumSet({ ...newCurrForm });
    getEquipmentNumData();
    router.back();
  };

  // 取消按钮
  const cancel = () => router.back();

  const getCategoryMsg = (key: any) => {
    const filterate = {
      21: () => '生产订单编号设置',
      30: () => '生产任务编号设置',
      28: () => '工单编号设置',
      29: () => '计划编号设置',
      36: () => '生产排程编号设置'
    };
    return filterate[key] ? filterate[key]() : null;
  };

  onMounted(() => {
    title.value = getCategoryMsg(categoryId.value);
    breadCrumb.value[2] = title.value;

    // breadCrumb.value= title.value;
  });
</script>

<style scoped lang="less">
  .number-setting {
    padding: 20px;

    .icon {
      cursor: pointer;
    }
    .icon-plus {
      color: #165dff;
      margin-right: 10px;
    }
    .icon-minus {
      color: red;
    }
  }
</style>
